<script setup lang="ts">
import { ref } from 'vue';
import PermitManagement from './PermitManagement.vue'; 
import RoleDetail from './RoleDetail.vue';
import RoleManagement from './RoleManagement.vue';

let roleId = ref(0);
let roleDetailVisable = ref(false);
function showRoleDetail(id: number) {
  roleDetailVisable.value = true;
  roleId.value = id;
}

function backToRoleManagement() {
  roleDetailVisable.value = false;
}
</script>

<template>
  <el-tabs type="border-card" style="margin-top: 24px;">
    <el-tab-pane label="用户账号管理"></el-tab-pane>
    <el-tab-pane label="角色管理">
      <RoleManagement v-if="!roleDetailVisable" @detail-click="showRoleDetail($event)"/>
      <RoleDetail v-if="roleDetailVisable" :roleId="roleId" @back-click="backToRoleManagement()"/>
    </el-tab-pane>
    <el-tab-pane label="通行证管理"><PermitManagement /></el-tab-pane>
  </el-tabs>
</template>

<style lang="scss">
@use '../../../assets/variable.scss' as variable;
.toolbar {
  display: flex;
  margin-bottom: 2px;
  padding: 8px 12px;
  background-color: variable.$primary5;
  border-radius: 2px;
}
</style>